<template>
    <div class='app-container'>
        <el-form
            ref="queryParamsRef"
            :inline="true"
            :model="queryParams"
            label-position="left"
            label-width="auto"
        >
            <el-form-item label="来访人：" prop="name">
                <el-input v-model="queryParams.name" clearable style="width: 10rem;" @change="getList"/>
            </el-form-item>
            <el-form-item label="状态：" prop="state">
                <el-select v-model="queryParams.state" clearable style="width: 10rem;" @change="getList">
                    <el-option label="全部" value=""/>
                    <el-option
                        v-for="item in nj_checkin_state"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="来访日期：">
                <el-date-picker
                    v-model="searchTime"
                    end-placeholder="截止时间"
                    range-separator="-"
                    start-placeholder="开始时间"
                    type="daterange"
                    value-format="YYYY-MM-DD"
                    @change="changeDateTimerHandle"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList">
                    <el-icon class="me-1">
                        <Search/>
                    </el-icon>
                    查询
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetQueryParamsHandle(queryParamsRef)">
                    <el-icon class="me-1">
                        <Refresh/>
                    </el-icon>
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <el-divider class="mt-0"/>

        <el-row class="mb-3">
            <el-col :span="24">
                <el-space>
                    <el-button plain type="primary" @click="dddEditRegisterVisitRef.showAddRegisterVisit()">
                        <el-icon class="me-2">
                            <Plus/>
                        </el-icon>
                        新增
                    </el-button>
                </el-space>
            </el-col>
        </el-row>

        <el-alert :closable="false" :title="totalVisit" class="mb-2" type="success"/>

        <el-table
            v-loading="loading"
            :data="tableData"
            border
            stripe
            :row-style="tableRowStyle"
            @row-dblclick="handleDbClick"
        >
            <el-table-column type="index" width="50"/>
            <el-table-column label="接待场所" prop="policeareaId" width="150"/>
            <el-table-column label="执勤法警" prop="adduserId" width="100"/>
            <el-table-column label="来访人" prop="name" width="100"/>
            <el-table-column label="性别" prop="sex" width="70">
                <template #default="scope">
                    <dict-tag :options="nj_sex" :value="scope.row.sex"/>
                </template>
            </el-table-column>
            <el-table-column label="身份证" prop="sfzId" width="200"/>
            <el-table-column label="地址" prop="address" width="350"/>
            <el-table-column label="来访日期" prop="checkintime" width="200"/>
            <el-table-column label="安检情况" prop="checkinfo" width="300"/>
            <el-table-column label="信访情况" prop="checkininfo" width="300"/>
            <el-table-column label="状态" prop="stateText" width="200"/>
            <el-table-column fixed="right" label="操作" width="200">
                <template #default="scope">
                    <el-button
                        link
                        size="small"
                        type="primary"
                        @click="dddEditRegisterVisitRef.showEditRegisterVisit(scope.row.jwCheckinloginId)"
                    >
                        <el-icon class="me-1">
                            <Edit/>
                        </el-icon>
                        编辑
                    </el-button>

                    <el-button
                        link
                        size="small"
                        type="primary"
                        @click="registerVisitReviewRef.showVisitDetail(scope.row.jwCheckinloginId)"
                    >
                        <el-icon class="me-1">
                            <View/>
                        </el-icon>
                        查看
                    </el-button>
                    <el-button
                        link
                        size="small"
                        type="danger"
                        @click="deleteHandle(scope.row)"
                    >
                        <el-icon class="me-1">
                            <Delete/>
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            v-model:limit="paging.pageSize"
            v-model:page="paging.pageNum"
            :total="total"
            @pagination="getList"
        />

        <AddEditRegisterVisit ref="dddEditRegisterVisitRef" @refresh-list="getList"/>
        <RegisterVisitReview ref="registerVisitReviewRef"/>
    </div>

</template>
<script setup>
import {Edit, Plus, Refresh, Search, View} from '@element-plus/icons-vue';
import AddEditRegisterVisit from '@/views/PoliceWork/RegistVisit/components/AddEditRegisterVisit.vue';
import {useTemplateRef} from 'vue';
import {deleteVisitApi, getVisitListApi} from '@/api/RegisterVisit/RegisterVisit.js';
import RegisterVisitReview from '@/views/PoliceWork/RegistVisit/components/RegisterVisitReview.vue';
import PageEnum from '@/enum/PageEnum.js';
import {ElMessageBox} from 'element-plus';

const {proxy} = getCurrentInstance()
const {nj_checkin_state, nj_sex} = proxy.useDict('nj_checkin_state', 'nj_sex')

const loading = ref(false)
const total = ref(0)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
});
const totalVisit = ref('');
const searchTime = ref([])
const queryParams = ref({
    name: '',
    state: '',
    params: {
        'beginTime': '',
        'endTime': ''
    }
})
const tableData = ref([
    {
        name: '213'
    }
]);

const queryParamsRef = useTemplateRef('queryParamsRef')
const dddEditRegisterVisitRef = useTemplateRef('dddEditRegisterVisitRef')
const registerVisitReviewRef = useTemplateRef('registerVisitReviewRef')

onMounted(() => getList())
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
// 获取列表数据
const getList = async () => {
    loading.value = true
    const res = await getVisitListApi(queryParams.value, paging.value)
    tableData.value = res.rows
    total.value = res.total
    totalVisit.value = `共计 [ ${res.total} ] 条来访记录`
    loading.value = false
}


// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }
    getList()
}

// 重置搜索
const resetQueryParamsHandle = async (elForm) => {
    if (!elForm) return
    elForm.resetFields()
    searchTime.value = []
    queryParams.value.params.beginTime = ''
    queryParams.value.params.endTime = ''
    await getList()
}

const deleteHandle = async (row) => {
    ElMessageBox.confirm(
        '确定要删除此条登记吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await deleteVisitApi(row.jwCheckinloginId).then(async () => {
            await getList()
        })
    }).catch(() => {
    })
}

const handleDbClick = (row) => {
    registerVisitReviewRef.value.showVisitDetail(row.jwCheckinloginId)
}
</script>
<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}
</style>